<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://unpkg.com/vue/dist/vue.js"></script>

	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
	<!--
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
 -->
 	<style type="text/css">

	.disabled {
	  color: orange;
	}

 	</style>
</head>
<body>

	<div id="app">
	    <div class="container-fluid">
	        <ul class="list-group">
	            <post v-for="comment in comments" :post="comment"></post>
	        </ul>
			<div id="comment-box">
		        <div class="input-group">
		        	<input type="text" class="form-control" placeholder="Enter a comment..." v-model="comment" @keyup.enter="postComment">
		        	<span class="input-group-btn">
		                <button class="btn btn-primary" type="button" @click="postComment">Sumbit</button>
		            </span>
		      </div>
		    </div>

	    </div>
	</div>

	<template id="post-template">
	  <li class="list-group-item">
	    <i class="glyphicon glyphicon-chevron-up" @click="upvote" :class="{disabled: upvoted}"></i>
	    <span class="label label-primary">{{ votes }}</span>
	    <i class="glyphicon glyphicon-chevron-down" @click="downvote" :class="{disabled: downvoted}"></i>
	    <a>{{ post.title }}</a>
	  </li>
	</template>


	<script type="text/javascript">

		Vue.component('post', {
		  template: "#post-template",
		  props: ['post'],
		  data: function() {
		    return {
		      upvoted: false,
		      downvoted: false
		    };
		  },
		  methods: {
		    upvote: function() {
		      this.upvoted = !this.upvoted;
		      this.downvoted = false;
		    },
		    downvote: function() {
		      this.downvoted = !this.downvoted;
		      this.upvoted = false;
		    }
		  },
		  computed: {
		    votes: function() {

		      if (this.upvoted) {
		        return this.post.votes + 1;
		      } else if (this.downvoted) {
		        return this.post.votes - 1;
		      } else {
		        return this.post.votes;
		      }

		    }
		  }
		});



		var vm = new Vue({
            el: '#app',
            data:{
            	comments: [
                {
			      title: "Great article!",
			      votes: 2
			    }, {
			      title: "VueJs commenting system with votes!",
			      votes: 5
			    }, {
			      title: "The random pun that gets a lot of upvotes",
			      votes: 85
			    }],
			    comment: ""
            },
            methods: {
			    postComment: function() {
			      this.comments.push({
			        title: this.comment,
			        votes: 0
			      })
			      this.comment = "";
			    }
			}

        });

	</script>
</body>
</html>
